<template>
  <div>
    <div id="main">
        <el-steps :active="active" finish-status="success" style="margin: 0 20px;">
          <el-step title="来店里"></el-step>
          <el-step title="充值会员"></el-step>
          <el-step title="成为会员"></el-step>
        </el-steps>
        <el-button  @click="next">下一步</el-button>

      <div class="ruleswrap">
        <div class="left" style="margin-left: 10px; margin-top: 50px;">
          <div class="block">
            <el-timeline>
              <el-timeline-item timestamp="会员福利日" placement="top">
                <el-card>
                  <h4>68福利日</h4>
                  <p>每个月每逢带有6和8的数字<br>即可享受会员福利</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="会员优享商品" placement="top">
                <el-card>
                  <h4>优惠劵折扣</h4>
                  <p>寄养：每月送10次免费优惠券<br>狗罐头：每月前50位用户享受8.5折</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="会员享受顶级服务" placement="top">
                <el-card>
                  <h4>宠物周边</h4>
                  <p>本店会员可使用低价折扣<br>购买萌宠钥匙扣以及萌宠量身定制服饰等周边</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
        <div class="right">
          <el-calendar class="date" >
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    }
  }
}
</script>

<style scoped>
.date{
  width: 850px;
  height:700px;
  margin-left: 30px;
}
.ruleswrap{
  display: flex;
}
.is-selected {
  color: #1989FA;
}
</style>